<template>
  <div class='container'>
    <el-pagination
      :current-page="pageSourse.current"
      :page-size="pageSourse.limit"
      :page-sizes="pageSizes"
      :small="false"
      :disabled="false"
      :background="true"
      :layout="layout"
      :total="pageSourse.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts" name="BasePagination">
import { ref } from "vue"
let props = withDefaults(defineProps<{
  pageSourse: pageType,
  pageSizes: number[],
  layout: string;
  queryPrams: objectType<any>;
  listUrl: string;
}>(), {
  // 复杂数据类型设置默认值使用函数的方式
  pageSourse: () => ({
    limit: 20,
    pages: 1,
    current: 1,
    total: 1
  }),
  pageSizes: () => [10, 20, 30, 50],
  layout: () => 'total, pager, jumper',
  queryPrams: () => {
    return {
      current: 1,
      limit: 20
    }
  },
  pageFun: () => {}
})

let emit = defineEmits(['onSearch'])

function handleCurrentChange (page: number) {
  console.log('currentchange')
  props.queryPrams.current = page
  emit('onSearch', props.listUrl)
}
function handleSizeChange (size: number) {
  console.log('sizechange')
  props.queryPrams.limit = size
  emit('onSearch', props.listUrl)
}
</script>

<style lang="less" scoped>
  :deep(.el-pagination){
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
  }
 .container {
  height: 70px;
 }
</style>
